<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">

    <div class="lg:w-10/12 w-full lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">

      </ma-crud>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import gameApi from '@/api/game'
const crudRef = ref()

const gameType = [
  { label: '贪玩蓝月', value: 'tanwan' },
  { label: '修仙', value: 'xiuxian' },
]

const crud = reactive({
  api: gameApi.getPageList,
  recycleApi: gameApi.getRecyclePageList,
  searchColNumber: 3,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationWidth: 200,
  add: { show: true, api: gameApi.create},
  edit: { show: true, api: gameApi.save },
  delete: {
    show: true,
    api: gameApi.delete,
    realApi: gameApi.realDelete,
  },
  recovery: { show: true, api: gameApi.recovery},

  formOption: {
    width: 800,
    layout: [
      { formType: 'grid', cols: [ { span: 12, formList: [ { dataIndex: 'name' }] },{ span: 12, formList: [{ dataIndex: 'type' }] }]  },
      { formType: 'grid', cols: [ { span: 12, formList: [ { dataIndex: 'game_id' }] },
          { span: 12, formList: [{ dataIndex: 'domain' }] }]  },
      { formType: 'grid', cols: [ { span: 12, formList: [ { dataIndex: 'agent_id' }] }, { span: 12, formList: [{ dataIndex: 'site_id' }] }]  },
      { formType: 'grid', cols: [ { span: 24, formList: [ { dataIndex: 'remark' }] }] },
    ]
  },
  isDbClickEdit: false,

})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
  {
    title: '游戏名称', dataIndex: 'name', width: 130, search: true,
    commonRules: [{ required: true, message: '游戏名称必填' }]
  },
  {
    title: '游戏类型', dataIndex: 'type', width: 130, search: true,
    formType:'select',
    dict:{
      data:gameType, translation: true,
    },
    commonRules: [{ required: true, message: '游戏名称必填' }]
  },
  {
    title: 'GAME_ID', dataIndex: 'game_id', width: 130,
    commonRules: [{ required: true, message: 'GAME_ID必填' }],placeholder:"可以从逆向apk或网络抓包中获取"
  },
  {
    title: '代理商ID', dataIndex: 'agent_id', width: 130,
    commonRules: [{ required: true, message: '代理商ID必填' }],placeholder:"可以从逆向apk或网络抓包中获取"
  },
  {
    title: '网站ID', dataIndex: 'site_id', width: 130,
    commonRules: [{ required: true, message: '网站ID必填' }],placeholder:"可以从逆向apk或网络抓包中获取"
  },
  {
    title: '域名', dataIndex: 'domain', width: 130,
    commonRules: [{ required: true, message: '域名必填' }]
    ,placeholder:"可以从逆向apk或网络抓包中获取"
  },
  {
    title: '备注', dataIndex: 'remark', width: 180, hide: true,
    formType: 'textarea', labelWidth: '86px'
  },
  {
    title: '创建时间', dataIndex: 'created_at', width: 180, addDisplay: false, editDisplay: false,
    search: true, formType: 'range'
  },
])
</script>


<style scoped>

</style>
